<template>
  <scroll-view class="scroll-view" enable-back-to-top scroll-y>
    <!-- 学习步骤 -->
    <view class="learn-steps">
      <view class="learn-steps-title">3步快速学{{ useBaseTypeName(baseType) }}</view>
      <view class="learn-steps-item">
        <view class="learn-steps-item-img-content">
          <image class='learn-steps-item-img' :src="useMemberLearnStepOne()" mode="heightFix" />
        </view>
        <view class="learn-steps-item-center">
          <view class="learn-steps-item-name">精简{{ selectedBase?.questionCount }}题</view>
          <view class="learn-steps-item-desc">题目全部做对，视为完成</view>
          <view class="learn-steps-item-process">
            <uv-line-progress :percentage="selectedBaseExerciseProcessRate" :showText="false" inactiveColor="#FAF1E5"
              activeColor="#BF8657" height="12rpx"></uv-line-progress>
            <text class="learn-steps-item-process-rate">{{ selectedBaseExerciseProcessRate }}%</text>
          </view>
        </view>
        <navigator :url="`/pagesExercise/selectBase/selectBase?baseType=${baseType}`" hover-class="none">
          <view class="learn-steps-item-button">去学习</view>
        </navigator>
      </view>
      <view class="learn-steps-item">
        <view class="learn-steps-item-img-content">
          <image class='learn-steps-item-img' :src="useMemberLearnStepTwo()" mode="heightFix" />
        </view>
        <view class="learn-steps-item-center">
          <view class="learn-steps-item-name">考前秘卷</view>
          <view class="learn-steps-item-desc">{{ preExamPapers?.length }}套试卷95分以上，视为完成</view>
          <view class="learn-steps-item-process">
            <uv-line-progress :percentage="30" :showText="false" inactiveColor="#FAF1E5" activeColor="#BF8657"
              height="12rpx"></uv-line-progress>
            <text class="learn-steps-item-process-rate">5%</text>
          </view>
        </view>
        <navigator :url="`/pagesExam/preExamPaper/preExamPaper?baseType=${baseType}`" hover-class="none">
          <view class="learn-steps-item-button">去学习</view>
        </navigator>
      </view>
      <view class="learn-steps-item">
        <view class="learn-steps-item-img-content">
          <image class='learn-steps-item-img' :src="useMemberLearnStepThree()" mode="heightFix" />
        </view>
        <view class="learn-steps-item-center">
          <view class="learn-steps-item-name">真实考场模拟</view>
          <view class="learn-steps-item-desc">3-5次95分以上，视为完成</view>
          <view class="learn-steps-item-process">
            <uv-line-progress :percentage="30" :showText="false" inactiveColor="#FAF1E5" activeColor="#BF8657"
              height="12rpx"></uv-line-progress>
            <text class="learn-steps-item-process-rate">5%</text>
          </view>
        </view>
        <navigator :url="`/pagesExam/mockRealExam/mockRealExam?baseType=${baseType}`" hover-class="none">
          <view class="learn-steps-item-button">去学习</view>
        </navigator>
      </view>
    </view>
    <!-- 考点专项 -->
    <view class="know-specails">
      <view class="know-specails-title">易错考点专项</view>
    </view>
  </scroll-view>

</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import { useMemberLearnStepOne, useMemberLearnStepTwo, useMemberLearnStepThree } from '@/pagesMember/static/images'
  import { useBaseTypeName, useSelectedBase } from '@/composables/LearnBase'
  import { useSelectedBaseExerciseProcess } from '@/composables/Exercise'
  import { usePreExamPapers } from '@/composables/MockExam'
  const props = defineProps<{
    baseType: string
  }>()

  // 题库类型
  const baseType = computed(() => props.baseType)
  // 精选题库
  const selectedBase = computed(() => useSelectedBase(baseType.value!).value)
  // 考前密卷
  const preExamPapers = computed(() => usePreExamPapers(baseType.value!))
  // 精选题库学习进度
  const selectedBaseExerciseProcess = computed(() => useSelectedBaseExerciseProcess(selectedBase.value!))
  // 精选题库学习进度百分比
  const selectedBaseExerciseProcessRate = computed(() => Math.round((selectedBaseExerciseProcess.value!.correctCount / selectedBaseExerciseProcess.value!.count) * 100))
  onMounted(async () => {

  })

</script>

<style lang="scss" scoped>
  .scroll-view {
    height: 100%;
  }

  // 学习步骤
  .learn-steps {
    margin-top: 20rpx;
    padding: 37rpx 35rpx;
    background-color: #ffffff;
    border-radius: 27rpx 27rpx 0rpx 0rpx;

    .learn-steps-title {
      margin-bottom: 40rpx;
      font-size: 36rpx;
      color: #2e2e2e;
      font-weight: bold;
    }

    .learn-steps-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 15rpx;
      background-color: #fffcf7;

      .learn-steps-item-img-content {
        width: 80rpx;
        display: flex;
        justify-content: center;

        .learn-steps-item-img {
          height: 82rpx;
        }
      }

      .learn-steps-item-center {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin: 0 34rpx;

        .learn-steps-item-name {
          font-size: 34rpx;
          color: #7f3d33;
          font-weight: bold;
          margin-bottom: 14rpx;
        }

        .learn-steps-item-desc {
          font-size: 24rpx;
          color: #976365;
          margin-bottom: 14rpx;
        }

        .learn-steps-item-process {
          display: flex;
          align-items: center;

          .learn-steps-item-process-rate {
            margin-left: 25rpx;
            font-size: 20rpx;
            color: #914b2a;
          }
        }
      }

      .learn-steps-item-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 121rpx;
        height: 57rpx;
        font-size: 24rpx;
        color: #ffffff;
        font-weight: bold;
        background-color: #b15735;
        border-radius: 29rpx;
      }
    }
  }

  .know-specails {
    margin-top: 20rpx;
    padding: 37rpx 35rpx;
    background-color: #ffffff;

    .know-specails-title {
      margin-bottom: 40rpx;
      font-size: 36rpx;
      color: #2e2e2e;
      font-weight: bold;
    }
  }


</style>
